<template>
  <n-form ref="formRef" :model="model" :rules="rules" :show-label="showLabel" :style="formStyle">
    <n-form-item v-for="column in columns" :key="column.name" :path="column.name">
      <n-input
          v-model:value="model[column.name]"
          :placeholder="column.placeholder"
          :round="column.round?column.round:false"
          :show-password-on="column.type === 'password'?column.showPasswordOn:undefined"
          :style="column.style?column.style:null"
          :type="column.type?column.type:'text'"
      />
    </n-form-item>
  </n-form>
  <n-button v-if="needButton" type="primary" @click="handleValidateClick">{{ buttonContent }}</n-button>
</template>

<script setup>
import {ref} from "vue";

const props = defineProps({
  model: {
    required: true,
    default: () => {
      return ref({})
    }
  },
  columns: {
    required: true,
    type: Object,
    default: () => {
      return {}
    }
  },
  formStyle: String,
  showLabel: {
    type: Boolean,
    default: true
  },
  rules: {
    type: Object,
    default: () => {
      return {}
    }
  },
  needButton: {
    type: Boolean,
    default: false
  },
  buttonContent: {
    type: String,
    default: ""
  },
  handler: {
    type: Function,
    default: null
  }
})
const formRef = ref(null)

function handleValidateClick(e) {
  e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      if (props.handler) {
        props.handler()
      }
    } else {
      console.log(errors);
    }
  });
}

</script>

<style scoped>

</style>